<%@ page import="com.pixiv.Entity.User" %>
<%--
  Created by IntelliJ IDEA.
  User: hasee
  Date: 2021/11/15
  Time: 20:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>投稿图</title>
    <link rel = "stylesheet" href = "${pageContext.request.contextPath}/pixiv/css/header.css">
    <link rel = "stylesheet" href = "${pageContext.request.contextPath}/common/layui/css/layui.css">
    <script src = "${pageContext.request.contextPath}/common/jquery3.6.0.js"></script>
    <script src = "${pageContext.request.contextPath}/common/layui/layui.js"></script>
    <script src = "${pageContext.request.contextPath}/pixiv/js/upload_uploadpicture.js"></script>
</head>
<body>
<%
    User u = (User) session.getAttribute("GLOBAL_USER_OBJECT");
%>

<div id = "head_test_0">
    <div class="layui-main layui-container">
        <div class="layui-col-md4">
            <!--<img style = "float:left;border:1px solid black;" src = "" width = "39px" height = "39px">-->
            <i id = "pointToLeft" class="layui-icon">&#xe857;</i>
            <img id = "gotoPosition" src = "${pageContext.request.contextPath}/pixiv/img/pixiv.png"
                 width = "120px";height = "65px"  >
            <script type = "text/javascript">
                document.querySelector("#gotoPosition").onclick = function(){
                    location.href = "${pageContext.request.contextPath}/position/gotoPosition";
                }
            </script>
            <div style = "line-height:49px;float:left;"></div>
        </div>
        <div class="layui-col-md3">
        </div>
        <div class="layui-col-md5">
            <ul class="layui-nav" style = "background-color:ghostwhite;flex-wrap:wrap;">
                <li style = "position:relative;left:10px;top:0px;">
                    <input type = "button" value = "投稿" id = "upPictureToTarget"><!--按钮-->
                </li>
                <li class="layui-nav-item" style = "position:relative;left:165px;top:-47px;">
                    <img src="${pageContext.request.contextPath}/user/getUserIcon" id = "UserIconDisplay" class="layui-nav-img">
                    <dl class="layui-nav-child" style = "width:150px;margin-left:-40px;margin-top:-16px;">

                        <img src = "${pageContext.request.contextPath}/user/getUserIcon"
                             style = "width:75px;height:75px;border-radius:35px;border:0px;">
                        <dd style = "color:rgba(20,20,20,0.7);">账号id:<%out.write(String.valueOf(u.getUserID()));%></dd>
                        <dd style = "color:rgba(20,20,20,0.7);">用户姓名:<%out.write(u.getName() );%></dd>
                        <dd style = "color:rgba(20,20,20,0.7);">e-mail:<%out.write(u.getEMail() );%></dd>
                        <dd style = "color:rgba(20,20,20,0.7);"><a href="${pageContext.request.contextPath}/position/gotoSetUser">设置</a></dd>
                        <dd style = "color:rgba(20,20,20,0.7);"><a href="${pageContext.request.contextPath}/position/gotoMyTitle">查看我的图库</a></dd>
                        <dd style = "color:rgba(20,20,20,0.7);"><a href="${pageContext.request.contextPath}/Login/gotoLogin">退出登录</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <script type = "text/javascript">
        //投稿按钮
        document.querySelector("#upPictureToTarget").onclick = function(){
            location.href = "${pageContext.request.contextPath}/auditTitle/upload";
        }
        //跳转个人界面
        document.querySelector("#UserIconDisplay").onclick = function(){
            location.href = "${pageContext.request.contextPath}/position/gotoSetUser";
        }
        //显示公告
        document.querySelector("#pointToLeft").onclick = function(){
            var left = document.querySelector("#left_topInformation");
            left.style.display = "block";
        }
    </script>

</div>

<div id = "uploadPictureTempStorage" style ="background-color:rgba(27,27,27,0.9);width:100%;height:500px;display:none;position:absolute;left:0px;top:60px;z-index:11;flex-wrap:wrap;overflow:hidden;">
    <i id = "closeTempStorage" class="layui-icon" style="
            cursor:pointer;width:39px;height:39px;float:left;color:rgba(255,255,255,0.85);position:relative;left:95%;">&#xe65c;</i>
    <div class="layui-upload" style = "width:100%;height:400px;">

        <div style = "margin-left:25px;
        width:100%;border:0px;overflow:hidden;">
            <div id="tempStoragePicture" style = "width:10000px;height:300px;margin:0px;display:flex;flex-wrap:wrap;">

            </div>
        </div>

        <button type="button" class="layui-btn layui-btn-normal" id="testList"
                style = "position:absolute;left:50%;top:447px;transform:translate(-50px,0px);">选择多文件</button>

        <button type="button" class="layui-btn" id="testListAction"
                style = "position:absolute;left:798px;top:447px;display:none;">开始上传</button>

        <i id = "switchLeftMove" class="layui-icon">&#xe65a;</i>
        <i id = "switchRightMove" class="layui-icon">&#xe65b;</i>
    </div>

    <script type = "text/javascript">
        var $ = layui.jquery
            ,upload = layui.upload;
        //多文件列表示例
        var demoListView = $('#demoList'),
            uploadListIns = upload.render({
            elem: '#testList',
            url: '${pageContext.request.contextPath}/auditTitle/uploadAuditPicture',
            accept: 'file',
            multiple: true,
            auto: false,
            bindAction: '#testListAction',
            choose: function(obj){
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                obj.preview(function(index, file, result)
                {
                    var style = "float:left;height:300px;margin:10px;";
                    var img = $(["<img src = \""+ result+ "\" style = \""+style+"\" >"].join(''));
                    var save = $("#tempStoragePicture");
                    save.append(img);

                });
            },
            done: function(res, index, upload){

            },
            error: function(index, upload){
            }
        });


    </script>
    <script type = "text/javascript">

        var movePos = 0;
        setInterval(
            function()
            {
                if (movePos == 0)
                    return ;

                var div = $("#tempStoragePicture");
                var div_left = parseInt(div.css("margin-left"));

                var result = div_left + movePos;
                if (result > 0)
                    result = 0;
                if (result < -1800)
                    result = -1800;
                div.css("margin-left",result + "px");
            },(1000 / 24)
        )
        document.querySelector("#switchLeftMove").onmouseover = function(){
            movePos = 10;
        }
        document.querySelector("#switchLeftMove").onmouseout = function(){
            movePos = 0;
        }
        document.querySelector("#switchRightMove").onmouseover = function(){
            movePos = -10;
        }
        document.querySelector("#switchRightMove").onmouseout = function(){
            movePos = 0;
        }
    </script>
    <style type = "text/css">
        #switchLeftMove{
            width: 30px;
            height: 300px;
            position:absolute;
            left:0px;
            top:90px;
            margin-left: 0px;
            line-height: 300px;
            background-color:rgba(255,255,255,0.4);
            z-index:19;
        }
        #switchLeftMove:hover{
            background-color:rgba(255,255,255,0.6);
        }
        #switchRightMove{
            width: 30px;
            height: 300px;
            position:absolute;
            left:100%;
            top:90px;
            transform:translate(-30px,0px);
            margin-left: 0px;
            line-height: 300px;
            background-color:rgba(255,255,255,0.4);
            z-index:19;
        }
        #switchRightMove:hover{
            background-color:rgba(255,255,255,0.6);
        }
    </style>
</div>


<div  id = "contenxt_test_1" style = "width:100%;height:1000px;position:absolute;left:0px;top:60px;">

    <div class="layui-main layui-container" style = "background-color:rgba(235,235,235,1.0);width:840px;height:1000px;">
        <ul>
            <li><a href = "">插画</a></li>
            <li><a href = "">漫画</a></li>
            <li><a href = "">动图</a></li>
            <li><a href = "">小说</a></li>
        </ul>

        <div style = "background-color:rgba(96,96,96,0.9);position:relative;left:0px;width:810px;height:400px;" >
            <input id = "uploadButton" type = "button" class = "layui-btn layui-btn-lg layui-btn-normal" value = "上传"
                   style = "position:relative;left:359px;top:180px;">
        </div>

        <div class="layui-main layui-container" style = "width:810px;height:600px;">
            <span style = "width:100%;text-align:center;">标题<label style = "margin-left:100px;background-color:red;color:ghostwhite">必填</label></span>
            <div class="layui-input-block" style = "margin:0px;padding:0px;">
                <input style = "margin:0px;padding:0px;" type="text" id = "titleCaption" name="title" lay-verify="title" autocomplete="off" placeholder="输入标题" class="layui-input">
            </div>
            <span style = "width:100%;text-align:left;">说明</span>
            <div class="layui-input-block" style = "margin:0px;padding:0px;">
                <textarea id = "titleContext" style = "margin:0px;padding:0px;" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
            <span style = "width:100%;text-align:left;">标签<label style = "margin-left:100px;background-color:red;color:ghostwhite">必填</label></span>
            <div class="layui-input-block" id = "labelDiv" style = "margin:0px;padding:0px;width:100%;background-color:rgba(252,252,252,1.0);">
            </div>
            <span style = "width:100%;text-align:left;">年龄限制<label style = "margin-left:100px;background-color:red;color:ghostwhite">必填</label></span>
            <br>
            <div class="layui-input-block" style = "margin:0px;padding:0px;width:100%;background-color:rgba(252,252,252,1.0);">
                <input type="radio" name = "ageCheck" value="" id ="ageCheck_1" style="margin-top:12px;">完全开放
                <input type="radio" name = "ageCheck" value="" id ="ageCheck_2" style="margin-top:12px;">不低于18岁
                <input type="radio" name = "ageCheck" value="" id ="ageCheck_3" style="margin-top:12px;">不低于12岁
            </div>
            <span style = "width:100%;text-align:left;">是否是原创作品<label style = "margin-left:100px;background-color:red;color:ghostwhite">必填</label></span>
            <br>
            <div class="layui-input-block" style = "margin:0px;padding:0px;width:100%;background-color:rgba(252,252,252,1.0);">
                <input type="radio" name = "rePrintCheck" value="" id ="rePrintCheck_1" style="margin-top:12px;">是
                <input type="radio" name = "rePrintCheck" value="" id ="rePrintCheck_2" style="margin-top:12px;">否
            </div>

            <span style = "width:100%;text-align:left;">信息</span>
            <div style = "margin:0px;padding:0px;width:100%;background-color:rgba(252,252,252,1.0);">
                以下作品禁止投稿。请在投稿之前进行确认。<br>
                ・他人制作的作品，发售中的商品图像，第三者持有权利的图像。<br>
                游戏、视频作品中的角色，包含截图画面的作品。<br>
                ・挪用以上画面，从最初开始就完全不是自己创作的作品。<br>
                ・作品以外的照片画面。
            </div>

            <button type="button" class="layui-btn" id="uploadTempPicButtonTest"
                    style = "position:relative;left:330px;top:12px;">上传</button>

        </div>
    </div>

    <script type = "text/javascript">

        document.querySelector("#uploadTempPicButtonTest").onclick = function(){

            var caption = document.querySelector("#titleCaption").value;
            var context = document.querySelector("#titleContext").value;
            var labelInfor = getSelectLabel();
            var ageLimit = getAgeLimit();
            var orgin = getOrginal();

            if (caption === "")
            {
                layer.msg("标题为空");
                return ;
            }else if (labelInfor === "")
            {
                layer.msg("请选择任意一个标签");
                return ;
            }else if (ageLimit === 0)
            {
                layer.msg("未选择年龄");
                return ;
            }else if (orgin === 0)
            {
                layer.msg("是否原创");
                return ;
            }

            $.ajax({
                url:"${pageContext.request.contextPath}/auditTitle/uploadToAudit",
                data:{cap:caption,con:context,lab:labelInfor,age:ageLimit,or:orgin},
                dataType:"json",
                type:"post",
                success:function(req){
                    if (req.flag == 1) {
                        var btn = document.querySelector("#testListAction");
                        btn.click();
                        layer.msg("上传成功,等待管理员审核中");
                        location.href = "${pageContext.request.contextPath}/position/gotoPosition";
                    }
                }
            });



        }
    </script>
    <script type = "text/javascript">
        document.querySelector("#uploadButton").onclick = function(){
            var store = document.querySelector("#uploadPictureTempStorage");
            store.style.display = "flex";
        }
        document.querySelector("#closeTempStorage").onclick = function(){
            var store = document.querySelector("#uploadPictureTempStorage");
            store.style.display = "none";
        }
    </script>
    <script type = "text/javascript">

        $.ajax({
            url:"${pageContext.request.contextPath}/auditTitle/resetSaveTemp"
        })

        $.ajax({
            url:"${pageContext.request.contextPath}/position/getLabels",
            dataType:"json",
            type:"post",
            success:function(req)
            {

                var labelDiv = document.querySelector("#labelDiv");
                var lst = req.data;
                for (var i = 0;i<lst.length;i++)
                {
                    var target = lst[i];
                    var picname = target.pictureLabel;
                    var style = "margin-left:5px;margin-right:5px;margin-top:12px;" ;
                    var input = document.createElement("input");
                    input.setAttribute("style",style);
                    input.setAttribute("type","checkbox");
                    input.setAttribute("saveinfor",picname);
                    labelDiv.appendChild(input);
                    labelDiv.append(picname);


                }
                    //console.log(req);
            }
        })
    </script>

    <style type = "text/css">
        #contenxt_test_1>div:nth-child(1)>ul:nth-child(1)
        {
            list-style-type:none;
            display:flex;
            flex-wrap:wrap;
            margin-top:30px;
            margin-left:0px;
            margin-right:0px;
            padding-left:0px;
            padding-right:0px;
            text-align:center;
            width:100%;
            height:35px;
            background-color:rgba(116,116,116,0.9);

        }
        #contenxt_test_1>div:nth-child(1)>ul:nth-child(1)>li{
            float:left;
            width:200px;
            height:34px;
            padding-left:0px;
            padding-right:0px;
            margin-left:0px;
            margin-right:0px;
            line-height:34px;
            color:rgba(222,222,222,0.95);


        }
        #contenxt_test_1>div:nth-child(1)>ul:nth-child(1)>li:hover{
            background-color:rgba(176,176,176,0.9);
        }


    </style>

</div>

</body>
</html>
